<template>
  <el-card>
    <el-button type="primary" @click="adduser">新增用户</el-button>
    <el-table :data="userlist" style="width: 100%" border stripe>
      <el-table-column fixed prop="username" label="用户名" width="150" />
      <el-table-column prop="nickname" label="昵称" width="120" />
      <el-table-column prop="mobile" label="电话" width="120" />
      <el-table-column prop="state" label="状态" width="120" />
      <el-table-column prop="date" label="注册时间" width="200" />
      <el-table-column label="操作" width="120" />
    </el-table>

    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        :page-sizes="[5, 10, 20, 30]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <Add-Edit ref="dialog" @success="addsuccess"></Add-Edit>
</template>

<script setup>
import { ref } from 'vue'
import { onMounted } from 'vue'
import { getUserInfo } from '../api/user'
import { addUser } from '../api/user'
const total = ref()
const userlist = ref()
const dialog = ref()
const queryInfo = {
  query: '',
  pagenum: 1,
  pagesize: 5
}
onMounted(async () => {
  getlist()
})
const getlist = async () => {
  const res = await getUserInfo(queryInfo)
  console.log(res.data)
  total.value = res.data.total
  userlist.value = res.data.userList
}
const handleSizeChange = (e) => {
  queryInfo.pagesize = e
  getlist()
  console.log(e)
}
const handleCurrentChange = (e) => {
  queryInfo.pagenum = e
  getlist()
  console.log(e)
}
const adduser = () => {
  console.log(dialog.value)
  dialog.value.open()
}

const addsuccess = async (e) => {
  const res = await addUser(e)
  console.log(res)
  getlist()
}
</script>

<style></style>
